<template>
	<view>
		<view class="search">
			<view style='width: 70%;'><u-search placeholder="搜索车,内容等等" v-model="keyword" :showAction='false'></u-search></view>
			<view class='search-text'>
				<text @click='goSearch'>搜索</text>
				<text @click='isShow=true'>发布</text>
			</view>
		</view>
		<u-popup :show="isShow">
			<view class='model'>
				<view>
					<text @click='isShow=false'>取消</text>
				</view>
				<view class='model-icon'>
					<view class='model-item' @click='goRelease'>
						<u--image src='/static/home/fq.png' width='100rpx' height='100rpx'></u--image>
						<text>发圈子</text>
					</view>
					<view class='model-item' @click='goProposer'>
						<u--image src='/static/home/tw.png' width='100rpx' height='100rpx'></u--image>
						<text>提问题</text>
					</view>
				</view>
			</view>
		</u-popup>
		
		<sxs-tabs
		    :selectedId="current"
		    :items="topBar"
		    :options="activeStyle"
		    @change="change"
		></sxs-tabs>
		
		<!--推荐-->
		<view class='end-cont' :class='{dis:actIndex ==0 }'><PenPart></PenPart></view>
		<!--评测-->
		<view class='end-cont' :class='{dis:actIndex ==1 }'><Assess></Assess></view>
		<!--视频-->
		<view class='end-cont' :class='{dis:actIndex ==2 }'><VideoPart></VideoPart></view>
		<!--房车圈-->
		<view class='end-cont' :class='{dis:actIndex ==3 }'><Evaluation></Evaluation></view>
		<!--新闻-->
		<view class='end-cont' :class='{dis:actIndex ==4 }'><News></News></view>
		<!--问答-->
		<view class='end-cont' :class='{dis:actIndex ==5 }'><Answer></Answer></view>
		<!--常识-->
		<view class='end-cont' :class='{dis:actIndex ==6 }'><Nous></Nous></view>
	</view>
</template>

<script>
import sxsTabs from '@/components/sxs-tabs/sxs-tabs.vue'
import PenPart from '@/components/home/PenPart.vue'
import Assess from '@/components/home/Assess.vue'
import VideoPart from '@/components/home/VideoPart.vue'
import Evaluation from '@/components/home/Evaluation.vue'
import News from '@/components/home/News.vue'
import Answer from '@/components/home/Answer.vue'
import Nous from '@/components/home/Nous.vue'
import { getUserInfo } from '@/api/login.js'
import { mapState , mapMutations } from 'vuex'
export default {
	components:{
		PenPart,
		Assess,
		VideoPart,
		Evaluation,
		News,
		Answer,
		Nous
	},	
	computed:{
		...mapState({
			status:state=>state.user.status
		})
	},
	onLoad(){
		//获取用户信息
		getUserInfo().then(res=>{
			//用户信息存储在vuex中了
			this.setUserInfo( res.data );
		})
	},
	onShow(){
		uni.$emit('test','test');
	},
	data() {
		return {
			isShow:false,//点击发布的模态控制
			keyword: '',//搜索的文字
			topBar:[  //顶部菜单	
				{  label:'推荐'  },
				{  label:'评测'  },
				{  label:'视频'  },
				{  label:'房车圈'},
				{  label:'新闻'  },
				{  label:'问答'  },
				{  label:'常识'  }
			],
			current:0 ,//默认第一个推荐,
			actIndex:0,//当前显示的topBar
			activeStyle:{
				color:'blue'
			}
		}
	},
	methods: {
		...mapMutations(['setUserInfo']),
		//点击topBar
		change( o ){
			this.actIndex = o.index;
			if( o.index == 0 ) return false;
			this.isLogin();
		},
		//判断是否是登录状态
		isLogin(){
			if( this.status ){
				//正常访问
				return false;
			}else{
				uni.redirectTo({
					url:'../login/login'
				})
			}
		},
		//进入搜页面
		goSearch(){
			uni.navigateTo({
				url:`/pages/index/search?key=${this.keyword}`
			})
		},
		//发圈
		goRelease(){
			if( !this.status){
				uni.redirectTo({
					url:'../login/login'
				})
				return false;
			}
			uni.navigateTo({
				url:'/pages/release/release'
			})
		},
		//提问题
		goProposer(){
			uni.navigateTo({
				url:'/pages/release/proposer?page=index',
			})
			this.isShow = false;
		}
	}
}
</script>

<style lang='scss' scoped>
.search{
	display: flex;
	align-items: center;
	padding:0rpx 30rpx;
	.search-text{
		display: flex;
		justify-content: space-around;
		width: 30%;
		text{
			flex:1;
			text-align: center;
		}
	}
}
.end-cont{
	display: none;
}
.dis{
	display: block;
}

/deep/ .u-tabs__wrapper__nav__item__text{
	font-size:32rpx;
	padding:0 15rpx;
}
.model{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}
.model-icon{
	display: flex;
	justify-content: space-around;
	align-items: center;
}
.model-item{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
</style>
